<template>
  <baidu-map class="bm-view" :zoom="11" :center="{ lng: 116.404, lat: 39.915 }">
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!-- <bm-map-type
      :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
      anchor="BMAP_ANCHOR_TOP_LEFT"
    ></bm-map-type> -->
    <bm-overview-map
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :isOpen="true"
    ></bm-overview-map>
    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
    ></bm-geolocation>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>
    <bm-marker
      :position="{ lng: 116.404, lat: 39.915 }"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
    >
      <bm-label
        content="我爱北京天安门"
        :labelStyle="{ color: 'red', fontSize: '24px' }"
        :offset="{ width: -35, height: 30 }"
      />
    </bm-marker>
  </baidu-map>
</template>

<style scoped>
.bm-view {
  width: 100%;
  height: 100%;
}
</style>
